<template>
  <div>
    <div class="header">
      <div class="set-up">
        <a href="">
          <img src="../../../images/shezhi.png" alt="">
        </a>
      </div>
      <div class="head-portrait">
        <img src="../../../images/bb148393c23d3f9faade4debe38ad7a2.png" alt="">
      </div>
      <div class="username">
        <span class="name"><b>Zomi</b></span><br>
        <br>
        <span class="message">
          <a href="">100</a>关注
          <a href="">120</a>粉丝
        </span>
      </div>
    </div>

    <div class="main">
      <van-tabs v-model="act">
        <!-- My News -->
        <van-tab title="我的动态">
          <!-- <van-divider :style="{ color: '#DFDFDF' }" /> -->
          <van-grid :column-num="1" :border="false">
            <van-grid-item v-for="item in list" :key="item.id">

              <div class="box">
                <div class="small">
                  <div class="day">
                    {{ item.day }}
                  </div>
                  <div class="mount">
                    {{ item.month }}
                  </div>
                </div>
                <div class="big">

                  <div class="huati">
                    {{ item.title1 }}
                  </div>
                  <div class="jianjie">
                    {{ item.title2 }}
                  </div>
                  <div class="tupian">
                    <img :src="item.img" alt="" style=" width:185px ;
                height: 150px; padding-top: 20px">
                  </div>
                </div>

              </div>

            </van-grid-item>
          </van-grid>
        </van-tab>



        <!-- My Collection -->
        <van-tab title="我的收藏">
          <van-grid :column-num="1" :border="false">
            <van-grid-item v-for="item of list" :key="item.id">

              <div class="box">
                <div class="small">
                  <div class="day">
                    {{ item.day }}
                  </div>
                  <div class="mount">
                    {{ item.month }}
                  </div>
                </div>
                <div class="big">

                  <div class="huati">
                    {{ item.title1 }}
                  </div>
                  <div class="jianjie">
                    {{ item.title2 }}
                  </div>
                  <div class="tupian">
                    <img :src="item.img" alt="" style=" width:185px ;
                height: 150px; padding-top: 20px">
                  </div>
                </div>

              </div>

            </van-grid-item>
          </van-grid>
        </van-tab>

        <!-- My message -->
        <van-tab title="我的消息">
          <van-grid :column-num="1" :border="false">
            <van-grid-item v-for="item of comment" :key="item.articleId ">
             <div class="box2">
            <div class="bigger">
              <div class="touxiang">
                <img v-bind:src="item.img" alt="" style="width:50px ;
                height: 50px; padding-top: 20px">
             </div>
            </div>
           <div class="smaller">
          
            <div class="jiancheng">
                {{ item.jiancheng }}
              </div>
              <div class="biaoti">
                {{ item.biaoti }}
              </div>
            
              
              <div class="huifu">
                {{ item.huifu }}
              </div>
              <div class="shijian">
                {{ item.shijia}}
              </div>
            </div>
           
            </div>
            </van-grid-item>
          </van-grid>
        </van-tab>
      </van-tabs>
      <!-- 网络错误 -->
      <!-- <van-empty image="network" description="没有内容" /> -->


    </div>
    <div class="footer">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">推荐</van-tabbar-item>
        <van-tabbar-item icon="search">榜单</van-tabbar-item>
        <van-tabbar-item icon="friends-o">发现</van-tabbar-item>
        <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
      </van-tabbar>

    </div>
  </div>
</template>

<script setup>


import { ref, onMounted } from 'vue';
import { userList, userComment } from "../../api/user"
import { useRoute } from 'vue-router';


const list = ref([])
const comment = ref([])
const route = useRoute()
const { id } = route.query

const getUserList = async () => {
  const res = await userList(id)
  list.value = res.data
}

const getUserComment = async () => {
  const res = await userComment(id)
  comment.value = res.data
}

onMounted(() => {
  getUserList(),
    getUserComment()
})

// onMounted(async () => {
//   const res = await userList(id)
//   console.log(res);
//   list.value = res.data
//   // console.log(res.data);
// })




</script>

<style lang="scss" scoped>
.header {
  height: 320px;
  background-image: url(../../../images/bgc.webp);

}

.head-portrait {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  top: 120px;
  left: 260px;
}

.username {
  width: 150px;
  height: 100px;
  position: relative;
  top: 60px;
  left: 30px;
}

.name {
  font-size: 30px;
}

.head-portrait img {
  width: 100px;
  height: 100px;
}

.set-up {
  width: 30px;
  height: 30px;
  position: relative;
  top: 50px;
  left: 330px;
}

.set-up img {
  width: 30px;
  height: 30px;
}


.van-grid {
  .van-grid-item {
    .van-grid-item__content {


      .box {
        border-top: 1px solid #ccc;
        width: 310px;
        height: 254px;
        display: flex;

        .small {
          .day {
            padding-top: 10px;
            font-size: 40px;
          }

          .mount {
            font-size: 14px;
            color: #666;
          }

          width:73px;
          height: 254px;

        }

        .big {

          width: 300px;
          height: 254px;

          .huati {
            padding-top: 10px;
            color: #ccc;
            font-size: 14px;
          }

          .jianjie {
            padding-top: 10px;
            font-size: 14px;

          }

        }
      }
      .box2{
        border-top: 1px solid #ccc;
        width: 310px;
        height: 100px;
        display: flex;
        .bigger{
          width: 60px;
          height: 100px;
         
        }
        .smaller{
         padding: 20px;
          width: 250px;
          height: 100px;
          .jiancheng{
            color: #FF8195;
            float: left;
            font-size: 14px;
          }
          .biaoti{
            margin-left:10px;
            font-size: 14px ;
          }
          .huifu{
            width: 250px;
            height: 20px;
            color: #666;
            margin-top: 10px;
            font-size: 12px;
          }
          .shijian{
            margin-top: 20px;
            color: #ccc;
          }
        }
      }
    }
  }
}
</style>